﻿<%@ page contentType="text/html; charset=utf-8"%>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
<c:set var="basePath" value="${pageContext.request.contextPath}"/>
<!DOCTYPE HTML>
<html lang="zh-cn">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>新增组织</title>
	<jsp:include page="/resources/inc/formHead.jsp" />
</head>
<body>
<form id="createForm" class="layui-form layui-form-pane" method="post">
	<div class="layui-form-item">
		<label class="layui-form-label">部门</label>
		<div class="layui-input-block">
			<input class="layui-input" id="parentSel" type="text" readonly value=""  onclick="showMenu();" />
			<input type="hidden" id="parentId" name="organizationId" />
		</div>
		<div id="menuContent" class="menuContent" style="display:none; position: absolute;z-index: 999">
			<ul id="treeContainer" class="ztree" style="margin-top:0; width:180px; height: 200px;"></ul>
		</div>
	</div>
	<div class="layui-form-item">
		<label class="layui-form-label" for="username">帐号</label>
		<div class="layui-input-block">
			<input id="username" type="text" class="layui-input" name="username" lay-verify="required">
		</div>
	</div>
	<div class="layui-form-item">
		<label class="layui-form-label" for="password">密码</label>
		<div class="layui-input-block">
			<input id="password" type="text" class="layui-input" name="password" lay-verify="required">
		</div>
	</div>
	<div class="layui-form-item">
		<label class="layui-form-label" for="realname">姓名</label>
		<div class="layui-input-block">
			<input id="realname" type="text" class="layui-input" name="realname" >
		</div>
	</div>

	<div class="layui-form-item">
		<label class="layui-form-label" for="avatar">头像</label>
		<div class="layui-input-inline">
			<input id="avatar" type="text" class="layui-input" name="avatar" readonly>
		</div>
		<div class="layui-input-inline">
			<div id="picker">上传头像</div>
		</div>
	</div>
	<div class="layui-form-item">
		<label class="layui-form-label" for="phone">电话</label>
		<div class="layui-input-block">
			<input id="phone" type="text" class="layui-input" name="phone" >
		</div>
	</div>
	<div class="layui-form-item">
		<label class="layui-form-label" for="email">邮箱</label>
		<div class="layui-input-block">
			<input id="email" type="text" class="layui-input" name="email" >
		</div>
	</div>
	<div class="layui-form-item">
		<label class="layui-form-label">用户类别</label>
		<div class="layui-input-block">
			<input type="radio" name="realUser" value="0" title="真实" checked>
			<input type="radio" name="realUser" value="1" title="虚拟">
		</div>
	</div>
	<div class="layui-form-item">
		<label class="layui-form-label">状态</label>
		<div class="layui-input-block">
			<input type="radio" name="locked" value="0" title="正常" checked>
			<input type="radio" name="locked" value="1" title="锁定">
		</div>
	</div>
	<div class="layui-form-item">
		<div class="layui-input-block">
			<button class="layui-btn" lay-submit="" lay-filter="sub">立即提交</button>
			<button type="reset" class="layui-btn layui-btn-primary">重置</button>
		</div>
	</div>
</form>
<jsp:include page="/resources/inc/formFooter.jsp" />
<script>
	FormCommon.initForm({
		url: "${basePath}/manage/user/create"
	});


	var setting = {
		check: {
			enable: true,
			chkStyle: "radio",
			radioType: "all"
		},
		view: {
			dblClickExpand: false,
			selectedMulti: false
		},
		data: {
			simpleData: {
				enable: true
			}
		},
		callback: {
			onClick: onClick,
			onCheck: onCheck
		}
	};

	//初始化node节点
	var zNodes =[
		<c:forEach var="org" items="${orgList}" varStatus="status">
		<c:choose>
		<c:when test="${status.end}">
		{id:${org.organizationId}, pId:${org.pid}, name:"${org.name}",open:true}
		</c:when>
		<c:otherwise>
		{id:${org.organizationId}, pId:${org.pid}, name:"${org.name}",open:true},
		</c:otherwise>
		</c:choose>
		</c:forEach>
	];

	function onClick(e, treeId, treeNode) {
		var zTree = $.fn.zTree.getZTreeObj("treeContainer");
		zTree.checkNode(treeNode, !treeNode.checked, null, true);
		return false;
	}

	function onCheck(e, treeId, treeNode) {
		var zTree = $.fn.zTree.getZTreeObj("treeContainer"),
				nodes = zTree.getCheckedNodes(true),
				v = "", id = "";
		for (var i=0, l=nodes.length; i<l; i++) {
			v += nodes[i].name + ",";
			id += nodes[i].id + ",";
		}
		if (v.length > 0 ) v = v.substring(0, v.length-1);
		if (id.length > 0 ) id = id.substring(0, id.length-1);
		$("#parentSel").attr("value", v);
		$("#parentId").attr("value", id);
		hideMenu();
	}


	function showMenu() {
		var parentObj = $("#parentSel");
		var parentOffset = $("#parentSel").offset();
		$("#menuContent").css({left:parentOffset.left + "px", top:parentOffset.top + parentObj.outerHeight() + "px"}).slideDown("fast");

		$("body").bind("mousedown", onBodyDown);
	}
	function hideMenu() {
		$("#menuContent").fadeOut("fast");
		$("body").unbind("mousedown", onBodyDown);
	}
	function onBodyDown(event) {
		if (!(event.target.id == "menuBtn" || event.target.id == "menuContent" || $(event.target).parents("#menuContent").length>0)) {
			hideMenu();
		}
	}

	$(document).ready(function(){
		$.fn.zTree.init($("#treeContainer"), setting, zNodes);
	});
</script>
</body>
</html>